<template>
	<view class=" ">
		<view class="page bg-white b_y">
			<view>
				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">店铺名称</text>
					</view>
					<input class="f28 in" type="text" placeholder="请输入店铺名称" v-model="name" />
				</view>

				<!-- 	<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">联系电话</text>
					</view>
					<input class="f28 in" type="text"  placeholder="请输入联系电话" v-model="shop_tel" />
				</view> -->

				<!-- 	<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">主营项目</text>
					</view>
					<input class="f28 in" type="text"  placeholder="如男装,男袜逗号分开" v-model="shop_tag" />
				</view> -->

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f-d " style="width: 530rpx;">
						<view class=" c_pl" style="width: 180rpx;">
							<text class="f28 c_z">商家详地址</text>
						</view>
						<textarea class="f28 in" style="width: 65%;" type="text" auto-height="" placeholder="请在地图上选择位置"
							v-model="address" />
					</view>
					<view class="">
						<text @click="on_dingwen()" class="bb cff  q_y f28 pr2 pl2"
							style="background-color:#0071FE;padding-top:5rpx;padding-bottom: 8rpx;">选择位置</text>
					</view>
				</view>

			<!-- 	<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="  c_pl" style="width: 180rpx;">
						<text class="f28 c_z">营业时间</text>
					</view>
					<lb-picker @time="time" :list="cata_time" :level="2" mode="unlinkedSelector" :value="cata_time" :lei="1">
						<text class="f28 c_pl">{{business_time}}</text>
					</lb-picker>
				</view> -->

				<view class="f-d    bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view style="width: 180rpx;">
						<text class="f28 c_z">选择外卖平台</text>
					</view>
					<view class="uni-list-cell-db">
						<lb-picker @cate="on_navcate" :list="nav_list" :level="2" mode="multiSelector" :value="nav_list"
							:lei="2">
							<text class="f28 c_pl">{{cata_name}}</text>
						</lb-picker>
					</view>
				</view>


				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx; ">
					<text class="f28 c_z">店铺头像</text>
				</view>
				<view class="flex">
					<view class="uni-uploader__input-box a-c j-c " style="margin-left: 20rpx;" v-if="shop_img">
						<image class="b_y" style="height: 208rpx;width:208rpx;" :src="img_url+shop_img"></image>
					</view>
					<view class="uni-uploader__input-box a-c j-c " style="margin-left: 20rpx;" v-if="shop_img1">
						<image class="b_y" style="height: 208rpx;width:208rpx;" :src="shop_img1"></image>
					</view>
					<view style="margin-left: 20rpx;" @tap="on_img(0)">
						<view class="flex a-c j-c" style="width: 200rpx;height: 200rpx;border: solid 2rpx #bfbfbf; ">
							<text class="  bicon  " style="font-size: 80rpx;color: #bfbfbf;">&#xe7dd;</text>
						</view>
					</view>
				</view>
				<view class="" style="height: 300rpx;padding-right: ;">

				</view>
			</view>
			<view class="flex j-c a-c">
				<button class="js-image-a" type="default "
					style="margin: 20upx;position: fixed;bottom: 120rpx;background-color: #0071FE;width: 600rpx;color: #fff;border-radius: 45rpx;"
					@tap="on_post">
					<text class=" p20">免费入驻</text>
				</button>
			</view>

			<lclipper v-if="show" :image-url="imageUrl" @success="ok_img" @cancel="show = false" />


		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	// import choose from "@/common/image/choose.vue"
	// import compress from "@/common/image/compress.vue"
	import $http from '@/common/requestConfig';
	// import avatar from "@/common/yq-avatar/yq-avatar.vue";
	import LbPicker from '@/common/lb-picker';
	import {
		params
	} from '@/common/time_list.js';
	import lclipper from "@/common/l-clipper/l-clipper.vue";

	export default {
		name: 'newsPublish',
		components: {
			// choose,
			// avatar,
			// compress,
			LbPicker,
			lclipper,

		},
		data() {
			return {
				idtushow: false,
				isYasuo: true,
				imageUrl: '',
				show: false,
				url: '',
				isdingwei: true,
				img_list: [],
				nav_list: ['美团', '饿了么', '全部'],
				cata_time: params,
				list: [],
				cata_name: '请选择',
				shop_img: '',
				shop_tel: '',
				shop_tag: '',
				business_time: '请选择',
				shop_name: '',
				is_tupian: 0,
				selectLocatin: {
					location: {}
				},
				shop_img1: '',
				rendering: false,
				find_set: {},
				img_url: '',

				name: '', //商家名称
				address: '', //商家地图地址
				platform: '', //平台
				address: '', //地址名称
				latitude: '', //纬度
				longitude: '' //经度
			}
		},
		onShow() {
			// 判断是否登录
			this.$module.ifToken(res => {
				if(res==1){
					this.$module.navigateTo('/pages/banmi/user_login')
				}else{
					return
				}
			})
		},
		onLoad() {
			// this.token = uni.getStorageSync('token');
			// if (this.token) {
			// 	this.init();
			// }
			// var that = this;
			// uni.$on('banmi_login', function(data) {
			// 	that.token = uni.getStorageSync('token');
			// 	that.init();
			// })
		},
		methods: {
			is_log() {
				
			},
			on_dingwen() { //选择地图位置
				let that = this;
				// this.token = uni.getStorageSync('user');
				// if (!this.token) {
				// 	this.is_log();
				// 	return
				// }
				uni.chooseLocation({
					success: function(res) {
						that.address = res.address; //地址名称
						that.latitude = res.latitude; //纬度
						that.longitude = res.longitude; //经度
					},
					fail(e) {
						console.log("e: " + JSON.stringify(e));
					}
				});
			},
			confirm(val) {
				this.idtushow = false;
				this.shop_lat = val.location.lat
				console.log("this.val: " + JSON.stringify(val));
				this.shop_lng = val.location.lng
				this.shop_addr = val.address
			},

			ok_img(url) {
				this.is_tupian = 1;
				this.shop_img1 = url.url;
				this.shop_img = '';
				this.show = false;
			},
			isPhone() { //手机号码校验
				let mPattern = /^1[23456789]\d{9}$/;
				return mPattern.test(this.shop_tel);
			},
			on_post() { //入驻店铺
				// this.token = uni.getStorageSync('token');
				// if (!this.token) {
				// 	this.is_log();
				// 	return
				// }

				if (!this.name) {
					this.$module.showToast("请输入店铺名称")
					return
				}
				// if (!this.shop_tel) {
				// 	uni.showToast({
				// 		title: "请输入联系电话",
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				// if (!this.shop_tag) {

				// 	uni.showToast({
				// 		title: "请输入商家标签",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.address) {
					this.$module.showToast("请选择商家地址")
					return
				}
				// if (this.business_time == '请选择') {
				// 	uni.showToast({
				// 		title: "请选择营业时间",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (!this.nav_id) {
				// 	uni.showToast({
				// 		title: "请选择店铺分类",
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.is_tupian == 1) {
				// 	let that = this
				// 	var img_list = new Array();
				// 	var map = {
				// 		path: this.shop_img1,
				// 	};
				// 	img_list.push(map);
				// 	this.Bmupload.upload({
				// 		files: img_list, // 必填 临时文件路径 格式: [{path: "图片地址"}]
				// 		load: true,
				// 		maxSize: 300000,
				// 		typeo: 'shop',
				// 		onEachUpdate: res => {

				// 		},
				// 		onProgressUpdate: res => {

				// 		}
				// 	}).then(res => {
				// 		that.shop_img1 = '';
				// 		that.shop_img = res[0];

				// 		that.add_shop();
				// 	});

				// 	return
				// }



				this.add_shop();

			},
			time(picker) {
				this.business_time = picker.value.join("-");
			},
			on_navcate(picker) {
				console.log(picker)
				this.cata_name = picker.item[0];
				this.platform = picker.index[0] + 1;
				var data = this.NavList[index];
				this.nav_id = data['id'];
			},
			init() {
				var that = this;
				let requestParams = {
					user_id: uni.getStorageSync('user_id'),
					token: uni.getStorageSync('token'),
				};
				this.Htpp.post('/plugin.php/banmi_tongcheng.index/shop_edit', 'app', {
					token: true,
					datalist: requestParams

				}).then(ret => {

					if (ret.data.status == 200) {

						this.rendering = true;

						var NavList = ret.data.data.NavList;
						var shop_find = ret.data.data.find;
						this.find_set = ret.data.data.find_set;

						this.img_url = ret.data.img_url;
						console.log("this.img_url: " + JSON.stringify(this.img_url));


						if (shop_find) {


							that.title = '商家编辑';
							that.is_Submit = '确认编辑';
							uni.setNavigationBarTitle({
								title: that.title
							})


							that.shop_name = shop_find.shop_name;
							that.imgSrc = shop_find.shop_img;
							that.shop_img = shop_find.shop_img;
							that.shop_tel = shop_find.shop_tel;
							that.shop_tag = shop_find.shop_tag;
							that.shop_addr = shop_find.shop_addr;

							that.business_time = shop_find.business_time;
							that.nav_id = shop_find.nav_id;
							that.shop_lng = shop_find.shop_lng;
							that.shop_lat = shop_find.shop_lat;
							for (var i = 0; i < NavList.length; i++) {
								if (NavList[i]['id'] == shop_find.nav_id) {
									that.cata_name = NavList[i]['name'];
								}

							}




						}

						this.NavList = NavList;
						var name = '';
						for (var i = 0; i < NavList.length; i++) {
							if (i == 0) {
								name += NavList[i]['name']
							} else {
								name += ',' + NavList[i]['name'];
							}

						}
						this.nav_list = name.split(",");


					}
				})
			},
			on_img() {
				this.token = uni.getStorageSync('token');

				if (!this.token) {
					this.is_log();
					return


				}
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.imageUrl = tempFilePaths[0];
						that.show = true;
					}
				});

			},
			add_shop() { //入驻调用接口
				let requestParams = {
					wxid: uni.getStorageSync('user').wxid,
					// user_id: uni.getStorageSync('user_id'),
					// token: uni.getStorageSync('token'),
					name: this.name, //商家名称
					address: this.address, //商家地图地址
					platform: this.platform, //平台
					address: this.address, //地址名称
					latitude: this.latitude, //纬度
					longitude: this.longitude //经度
					// shop_name: this.shop_name,
					// shop_img: this.shop_img,
					// shop_tel: this.shop_tel,
					// shop_tag: this.shop_tag,
					// shop_addr: this.shop_addr,
					// business_time: this.business_time,
					// nav_id: this.nav_id,
					// shop_lng: this.shop_lng,
					// shop_lat: this.shop_lat
				};
				this.Htpp.post('/mehrb/meplus/business', 'app', {
					token: true,
					datalist: requestParams
				}).then(ret => {
					console.log(ret)
					return
					uni.showToast({
						title: ret.data.msg,
						icon: 'none'
					})

					if (ret.data.status == 200) {
						uni.navigateTo({
							url: '/pages/ban_tongchengshop/my_shop'
						})

					}
				})
			},



















		}
	}
</script>

<style>
	page {
		background-color: #EFEFF4;
	}




	.shuru {
		height: 250rpx;
		line-height: 50upx;
		width: 750rpx;
		border-width: 2rpx !important;
		border-right-style: solid !important;
		border-left-color: #FFFFFF !important;
		border-right-color: #FFFFFF !important;
		border-bottom-color: #D9D9D9 !important;
		border-top-color: #FFFFFF !important;

	}

	.input-view {
		font-size: 28upx;
	}

	.choose-location {
		padding: 30rpx;


	}


	.info-box {
		padding: 30rpx 0;

	}

	.info-box-item {
		padding-bottom: 20rpx;
	}

	.feedback-title {

		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		color: #8f8f94;
		font-size: 28upx;
	}



	.in {
		width: 500rpx;
		height: 50rpx;
	}

	.close-view {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		background-color: #FF5053;
		color: #FFFFFF;
		position: relative;
		top: -110px;
		right: -85px;
		font-size: 20rpx;
	}
</style>